<template>
  <div class="app-container">
    <div data-v-a097b1ca="" data-v-35c594b1="" class="app-main-container">
      <div
        data-v-a097b1ca=""
        class="table-container"
        style="min-height: calc(100vh - 257px)"
      >
        <div class="el-row" style="margin-left: -5px; margin-right: -5px">
          <!-- 导航栏 -->
          <div
            class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24"
            style="padding-left: 5px; padding-right: 5px"
          >
            <div class="el-card is-always-shadow">
              <div class="el-card__body">
                <div class="row-bg el-row is-justify-center el-row--flex">
                  <div class="content_start el-col el-col-12">
                    <button
                      @click="returnFn"
                      type="button"
                      class="el-button el-button--primary el-button--small"
                    >
                      <i class="el-icon-arrow-left"></i
                      ><span> 重新选择 </span></button
                    ><span
                      style="
                        font-size: 18px;
                        font-weight: bold;
                        margin-left: 16px;
                      "
                    >
                      电池编号:{{ list.id || "" }}
                    </span>
                  </div>
                  <!-- tab栏 -->
                  <div
                    class="el-col el-col-12"
                    style="justify-content: flex-end"
                  >
                    <div
                      role="radiogroup"
                      class="el-radio-group"
                      v-for="(item, index) in tabList"
                      :key="item.id + index"
                    >
                      <button
                        @click="tabListFn(item.id)"
                        type="button"
                        class="el-button el-button--small"
                        :class="
                          tabListId == item.id ? 'el-button--primary' : ''
                        "
                      >
                        <span>{{ item.name }} </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!--tab栏下的内容---基础信息  -->
          <div
            v-if="tabListId == 1"
            class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24"
            style="padding-left: 5px; padding-right: 5px"
          >
            <div class="el-card is-always-shadow">
              <div class="el-card__body">
                <div style="text-align: center">
                  设备数据查询：<el-input
                    type="text"
                    placeholder="只能查询24小时内的数据"
                    style="width: 250px; margin-right: 10px"
                    v-model="dataInput"
                  /><el-button @click="databuttonFn">搜索</el-button>
                </div>
                <div
                  class="el-row is-align-middle el-row--flex"
                  style="padding: 8px"
                >
                  <!-- 电池信息 -->
                  <div class="el-col el-col-10" type="flex" align="middle">
                    <!-- 电池信息--ims编号、电池状态 -->
                    <div
                      class="content_bt"
                      style="width: 320px; margin-top: 16px"
                    >
                      <span
                        style="
                          font-size: 14px;
                          font-weight: bold;
                          text-align: left;
                          line-height: 200%;
                        "
                      >
                        ims编码：{{ list.imsi || "--" }} <br />
                        <!-- 更新时间：2024-04-22 16:36:16<span class="el-tag el-tag--info el-tag--small el-tag--light">搁置中</span> -->
                        电池状态：<span
                          class="el-tag el-tag--info el-tag--small el-tag--light"
                          >{{
                            list.status == 0
                              ? "移动"
                              : list.status == 1
                              ? "静止"
                              : list.status == 2
                              ? "存储"
                              : list.status == 3
                              ? "休眠"
                              : ""
                          }}</span
                        >
                      </span>
                    </div>
                    <!-- 电池信息--电池图标 -->
                    <div class="el-row">
                      <span class="title_tx2"
                        >SOC:{{ list.soc ? list.soc + "%" : "0%" }}</span
                      >
                      <div
                        class="el-image img_battery"
                        style="margin-top: 15px; width: 300px; height: 160px"
                      >
                        <img
                          src="../../../assets/images/dianchidatubiao.png"
                          class="el-image__inner"
                          style="object-fit: fill"
                        />
                      </div>
                    </div>
                    <!-- 电池信息--列表 -->
                    <div
                      class="el-col el-col-24"
                      type="flex"
                      align="middle"
                      justify="middle"
                      style="margin-top: 30px; margin-bottom: 30px"
                    >
                      <div class="el-descriptions">
                        <div class="el-descriptions__body">
                          <table
                            class="el-descriptions__table is-bordered el-descriptions--small"
                          >
                            <!-- <tbody>
                              <tr class="el-descriptions-row">
                                <th
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                                >
                                  充电MOS
                                </th>
                                <td
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__content"
                                >
                                  <div
                                    role="switch"
                                    aria-disabled="true"
                                    class="el-switch is-disabled is-checked"
                                    aria-checked="true"
                                  >
                                    <input
                                      type="checkbox"
                                      name=""
                                      true-value="true"
                                      disabled="disabled"
                                      class="el-switch__input"
                                    /><span
                                      class="el-switch__core"
                                      style="
                                        width: 40px;
                                        border-color: rgb(65, 181, 132);
                                        background-color: rgb(65, 181, 132);
                                      "
                                    ></span
                                    >
                                  </div>
                                </td>
                                <th
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                                >
                                  放电MOS
                                </th>
                                <td
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__content"
                                >
                                  <div
                                    role="switch"
                                    aria-disabled="true"
                                    class="el-switch is-disabled is-checked"
                                    aria-checked="true"
                                  >
                                    <input
                                      type="checkbox"
                                      name=""
                                      true-value="true"
                                      disabled="disabled"
                                      class="el-switch__input"
                                    /><span
                                      class="el-switch__core"
                                      style="
                                        width: 40px;
                                        border-color: rgb(65, 181, 132);
                                        background-color: rgb(65, 181, 132);
                                      "
                                    ></span
                                    >
                                  </div>
                                </td>
                                <th
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                                >
                                  均衡开关
                                </th>
                                <td
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__content"
                                >
                                  <div
                                    role="switch"
                                    aria-disabled="true"
                                    class="el-switch is-disabled"
                                  >
                                    <input
                                      type="checkbox"
                                      name=""
                                      true-value="true"
                                      disabled="disabled"
                                      class="el-switch__input"
                                    /><span
                                      class="el-switch__core"
                                      style="
                                        width: 40px;
                                        border-color: rgb(243, 77, 55);
                                        background-color: rgb(243, 77, 55);
                                      "
                                    ></span
                                    >
                                  </div>
                                </td>
                              </tr>
                            </tbody> -->
                            <tbody>
                              <tr class="el-descriptions-row">
                                <th
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                                >
                                  当前电流
                                </th>
                                <td
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__content"
                                >
                                  <span
                                    class="el-tag el-tag--info el-tag--small el-tag--light"
                                  >
                                    {{ list.i ? list.i / 1000 + "mA" : "0mA" }}
                                  </span>
                                </td>
                                <th
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                                >
                                  当前电压
                                </th>
                                <td
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__content"
                                >
                                  <span
                                    class="el-tag el-tag--small el-tag--light"
                                  >
                                    {{
                                      list.v ? list.v / 100 + "v" : "0v"
                                    }}</span
                                  >
                                </td>
                                <th
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                                >
                                  当前容量
                                </th>
                                <td
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__content"
                                >
                                  <span
                                    class="el-tag el-tag--info el-tag--small el-tag--light"
                                  >
                                    {{ list.ah ? list.ah / 100 + "ah" : "0ah" }}
                                  </span>
                                </td>
                              </tr>
                            </tbody>
                            <tbody>
                              <tr class="el-descriptions-row">
                                <th
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                                >
                                  循坏次数
                                </th>
                                <td
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__content"
                                >
                                  <span
                                    class="el-tag el-tag--small el-tag--light"
                                    >{{
                                      list.loop_sum
                                        ? list.loop_sum + "次"
                                        : "0次"
                                    }}</span
                                  >
                                </td>
                                <th
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                                >
                                  电芯数量
                                </th>
                                <td
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__content"
                                >
                                  <span
                                    class="el-tag el-tag--small el-tag--light"
                                    >{{
                                      list.cell_sum
                                        ? list.cell_sum + "个"
                                        : "0个"
                                    }}</span
                                  >
                                </td>
                                <th
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                                >
                                  生命信号
                                </th>
                                <td
                                  colspan="5"
                                  class="el-descriptions-item__cell el-descriptions-item__content"
                                >
                                  <span
                                    class="el-tag el-tag--small el-tag--light"
                                    >{{
                                      list.gms_signal ? list.gms_signal : "0"
                                    }}</span
                                  >
                                </td>
                              </tr>
                            </tbody>
                            <tbody>
                              <tr class="el-descriptions-row">
                                <th
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                                >
                                  硬件版本
                                </th>
                                <td
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__content"
                                >
                                  <span
                                    class="el-tag--small el-tag--light ellipsis-text"
                                    >{{
                                      list.hard_version
                                        ? list.hard_version
                                        : "--"
                                    }}</span
                                  >
                                </td>
                                <th
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                                >
                                  软件版本
                                </th>
                                <td
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__content"
                                >
                                  <span
                                    class="el-tag--small el-tag--light ellipsis-text"
                                    >{{
                                      list.soft_version
                                        ? list.soft_version
                                        : "--"
                                    }}</span
                                  >
                                </td>
                                <th
                                  colspan="1"
                                  class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                                >
                                  协议版本
                                </th>
                                <td
                                  colspan="5"
                                  class="el-descriptions-item__cell el-descriptions-item__content"
                                >
                                  <span
                                    class="el-tag--small el-tag--light ellipsis-text"
                                    >{{
                                      list.protocol_version
                                        ? list.protocol_version
                                        : "--"
                                    }}</span
                                  >
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                    <!-- 电池信息---放充电 -->
                    <!-- <div
                      class="el-row is-align-middle el-row--flex"
                      style="padding: 8px"
                    >
                      <div class="el-col el-col-12" type="flex" align="middle">
                        <span>放电MOS:</span
                        ><span
                          class="el-tag el-tag--danger el-tag--mini el-tag--dark"
                        >
                          关闭 </span
                        ><span
                          class="el-tag el-tag--success el-tag--mini el-tag--dark"
                        >
                          开启
                        </span>
                      </div>
                      <div class="el-col el-col-12" type="flex" align="middle">
                        <span>充电MOS:</span
                        ><span
                          class="el-tag el-tag--danger el-tag--mini el-tag--dark"
                        >
                          关闭 </span
                        ><span
                          class="el-tag el-tag--success el-tag--mini el-tag--dark"
                        >
                          开启
                        </span>
                      </div>
                    </div> -->
                  </div>
                  <!-- 电芯信息 -->
                  <div class="el-col el-col-14" type="flex" align="middle">
                    <div class="el-row">
                      <!-- 电芯信息---图表 -->
                      <div
                        style="
                          font-size: 23px;
                          font-weight: 700;
                          margin-bottom: 10px;
                        "
                      >
                        设备最新{{ dataInput || 2 }}小时数据
                      </div>
                      <div>
                        <div
                          style="height: 350px; width: 100%; line-height: 350px"
                          v-if="typechartS && typechartA && typechartT"
                        >
                          暂无图表数据
                        </div>
                        <line-chart
                          v-else
                          :chartData="list"
                          :dataInput="dataInput"
                          :databutton="databutton"
                        />
                      </div>
                      <!-- 电芯信息----温度与电压-->
                      <div
                        class="el-col el-col-23 el-col-offset-1"
                        type="flex"
                        align="middle"
                        justify="middle"
                      >
                        <!-- 电芯信息---温度 -->
                        <div
                          class="el-row is-align-middle el-row--flex"
                          style="margin-top: 8px"
                        >
                          <div class="content_center el-col el-col-7">
                            <div class="el-image item_battery">
                              <img
                                src="../../../assets/images/wendu.png"
                                class="el-image__inner"
                              />
                            </div>
                            <span style="font-size: 12px; margin-right: 4px">
                              pcd板温度: </span
                            ><span style="font-size: 12px; font-weight: bold">
                              {{ list.pcd_t ? list.pcd_t + "℃" : "0℃" }}
                            </span>
                          </div>
                          <div class="content_center el-col el-col-7">
                            <div class="el-image item_battery">
                              <img
                                src="../../../assets/images/wendu.png"
                                class="el-image__inner"
                              />
                            </div>
                            <span style="font-size: 12px; margin-right: 4px">
                              外壳温度: </span
                            ><span style="font-size: 12px; font-weight: bold">
                              {{ list.shell_t ? list.shell_t + "℃" : "0℃" }}
                            </span>
                          </div>
                          <div class="content_center el-col el-col-7">
                            <div class="el-image item_battery">
                              <img
                                src="../../../assets/images/wendu.png"
                                class="el-image__inner"
                              />
                            </div>
                            <span style="font-size: 12px; margin-right: 4px">
                              电芯温度: </span
                            ><span style="font-size: 12px; font-weight: bold">
                              {{ list.cell_t ? list.cell_t + "℃" : "0℃" }}
                            </span>
                          </div>
                        </div>
                        <!-- 电芯信息---电压 -->
                        <div>
                          <div
                            class="el-row is-align-start el-row--flex"
                            style="margin-top: 20px"
                          >
                            <div
                              class="el-col el-col-7"
                              type="flex"
                              align="middle"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--plain"
                              >
                                最高单体电压：{{ maxdianxin }}V
                              </span>
                            </div>
                            <div
                              class="el-col el-col-7"
                              type="flex"
                              align="middle"
                            >
                              <span
                                class="el-tag el-tag--danger el-tag--small el-tag--plain"
                              >
                                最低单体电压：{{ mindianxin }}V
                              </span>
                            </div>
                            <div
                              class="el-col el-col-7"
                              type="flex"
                              align="middle"
                            >
                              <span
                                class="el-tag el-tag--info el-tag--small el-tag--plain"
                              >
                                单体电压压差：{{
                                  (maxdianxin - mindianxin).toFixed(3)
                                }}V
                              </span>
                            </div>
                          </div>
                          <div
                            class="el-row el-row--flex"
                            style="
                              margin-top: 8px;
                              display: flex;
                              justify-content: flex-start;
                              align-items: center;
                              flex-wrap: wrap;
                            "
                          >
                            <!-- 有电芯的时候 -->
                            <div v-if="dianxinList.length !== 0">
                              <div
                                class="content_start el-col el-col-5"
                                style="width: 20%"
                                v-for="(item, index) in dianxinList"
                                :key="index"
                              >
                                <span style="font-size: 12px; width: 20px">
                                  [{{ index + 1 }}]
                                </span>
                                <div class="el-image item_battery">
                                  <img
                                    src="../../../assets/images/batterydianxin.png"
                                    class="el-image__inner"
                                  />
                                </div>
                                <span
                                  style="
                                    font-size: 12px;
                                    font-weight: bold;
                                    color: rgb(34, 34, 34);
                                  "
                                >
                                  {{ (item / 10).toFixed(3) }}V
                                </span>
                              </div>
                            </div>
                            <!-- 没有电芯数据的时候 -->
                            <div
                              v-else
                              style="
                                width: 100%;
                                text-align: center;
                                padding-top: 10px;
                              "
                            >
                              暂无电芯数据
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- gps信息 -->
                <div class="el-row">
                  <div
                    class="el-row is-justify-space-between is-align-middle el-row--flex"
                    style="padding: 8px; margin-top: 8px"
                  >
                    <div class="el-col el-col-20">
                      <span class="det_title">GPS信息</span>
                    </div>
                    <div class="el-col el-col-2">
                      <button
                        type="button"
                        class="el-button el-button--primary el-button--mini"
                        style="margin-left: 8px"
                      >
                        <!----><!----><span> 下发指令 </span>
                      </button>
                    </div>
                  </div>
                  <div class="el-descriptions">
                    <div class="el-descriptions__body">
                      <table
                        class="el-descriptions__table is-bordered el-descriptions--mini"
                      >
                        <tbody>
                          <tr class="el-descriptions-row">
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> gms信息
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              {{ list.gms || "--" }}
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-stopwatch"></i> 行驶速度
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              {{ list.speed || "--" }}
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 信号
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span class="el-tag el-tag--mini el-tag--light"
                                >GMS:{{ list.gms_signal || "--" }}</span
                              ><span class="el-tag el-tag--mini el-tag--light">
                                基站定位
                              </span>
                            </td>
                          </tr>
                        </tbody>
                        <tbody>
                          <tr class="el-descriptions-row">
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-time"></i> GPS经度
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              {{ list.lng || "--" }}
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-time"></i> GPS纬度
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              {{ list.lat || "--" }}
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 状态
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span class="el-tag el-tag--mini el-tag--light">
                                {{
                                  list.status == 0
                                    ? "移动"
                                    : list.status == 1
                                    ? "静止"
                                    : list.status == 2
                                    ? "存储"
                                    : list.status == 3
                                    ? "休眠"
                                    : ""
                                }}
                              </span>
                            </td>
                          </tr>
                        </tbody>
                        <tbody>
                          <tr class="el-descriptions-row">
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-time"></i> GPS行驶距离
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              {{ list.mileage ? list.mileage + "km" : "0km" }}
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-time"></i> GPS位置类型
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              {{
                                list.loc_type == 1
                                  ? "东/北方向"
                                  : list.loc_type == 2
                                  ? "东/南方向"
                                  : list.loc_type == 3
                                  ? "西/北方向"
                                  : list.loc_type == 4
                                  ? "西/南方向"
                                  : list.loc_type == 1
                                  ? "GPS未定位"
                                  : "--"
                              }}
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>

                <!-- 报警信息 -->
                <div class="el-row">
                  <div
                    class="el-row is-justify-space-between is-align-middle el-row--flex"
                    style="padding: 8px; margin-top: 8px"
                  >
                    <div class="el-col el-col-20">
                      <span class="det_title">报警信息</span>
                    </div>
                  </div>
                  <div class="el-descriptions">
                    <div class="el-descriptions__body">
                      <table
                        class="el-descriptions__table is-bordered el-descriptions--mini"
                      >
                        <tbody>
                          <tr class="el-descriptions-row">
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 单体电压过高告警
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 单体电压过低告警
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 总压过高告警
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 总压过低告警
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 充电电流过大告警
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                          </tr>
                        </tbody>
                        <tbody>
                          <tr class="el-descriptions-row">
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 放电电流过大告警
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 充电温度过高告警
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 放电温度过高告警
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 充电温度过低告警
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 放电温度过低告警
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                          </tr>
                        </tbody>
                        <tbody>
                          <tr class="el-descriptions-row">
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> MOS高温告警
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 分流器高温告警
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 压差过大告警
                            </th>
                            <td
                              colspan="11"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                <!-- 保护状态 -->
                <div class="el-row">
                  <div
                    class="el-row is-justify-space-between is-align-middle el-row--flex"
                    style="padding: 8px; margin-top: 8px"
                  >
                    <div class="el-col el-col-20">
                      <span class="det_title">保护状态</span>
                    </div>
                  </div>
                  <div class="el-descriptions">
                    <div class="el-descriptions__body">
                      <table
                        class="el-descriptions__table is-bordered el-descriptions--mini"
                      >
                        <tbody>
                          <tr class="el-descriptions-row">
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 单体电压过高保护
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 单体电压过低保护
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 总压过高保护
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 总压过低保护
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 充电电流过大保护
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                          </tr>
                        </tbody>
                        <tbody>
                          <tr class="el-descriptions-row">
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 放电电流过大保护
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 充电温度过高保护
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 放电温度过高保护
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 充电温度过低保护
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 放电温度过低保护
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                          </tr>
                        </tbody>
                        <tbody>
                          <tr class="el-descriptions-row">
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> MOS高温保护
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 分流器高温保护
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 预充失败
                            </th>
                            <td
                              colspan="11"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>

                <!-- 失效状态 -->
                <div class="el-row">
                  <div
                    class="el-row is-justify-space-between is-align-middle el-row--flex"
                    style="padding: 8px; margin-top: 8px"
                  >
                    <div class="el-col el-col-20">
                      <span class="det_title">失效状态</span>
                    </div>
                  </div>
                  <div class="el-descriptions">
                    <div class="el-descriptions__body">
                      <table
                        class="el-descriptions__table is-bordered el-descriptions--mini"
                      >
                        <tbody>
                          <tr class="el-descriptions-row">
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 充电MOS失效
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 放电MOS失效
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 温度传感器失效
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 电芯电压失效
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                            <th
                              colspan="1"
                              class="el-descriptions-item__cell el-descriptions-item__label is-bordered-label"
                            >
                              <i class="el-icon-tickets"></i> 模拟前端通讯失效
                            </th>
                            <td
                              colspan="3"
                              class="el-descriptions-item__cell el-descriptions-item__content"
                            >
                              <span
                                class="el-tag el-tag--success el-tag--small el-tag--light"
                              >
                                正常
                              </span>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!--tab栏下的内容---位置轨迹  -->
          <div
            v-if="tabListId == 2"
            class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24"
            style="padding-left: 5px; padding-right: 5px"
          >
            <!-- 有经纬度显示地图 -->
            <div v-if="!iswzgjmap">
              <!-- 顶部栏 -->
              <div class="danxin">
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    padding-bottom: 10px;
                  "
                >
                  <!-- 顶部栏---左边 -->
                  <div
                    class="el-col el-col-12"
                    style="
                      display: flex;
                      justify-content: flex-start;
                      align-items: center;
                    "
                  >
                    <!-- <div
                    style="
                      font-weight: 700;
                      padding-right: 20px;
                      font-size: 14px;
                    "
                  >
                    电池编号：{{ list.id || "--" }}
                  </div> -->

                    <div
                      role="radiogroup"
                      class="el-radio-group"
                      v-for="(item, index) in addressTabList"
                      :key="item.id + index"
                    >
                      <button
                        @click="addresstabListFn(item.id)"
                        type="button"
                        class="el-button el-button--small"
                        :class="
                          addresstabListId == item.id
                            ? 'el-button--primary'
                            : ''
                        "
                      >
                        <span>{{ item.name }} </span>
                      </button>
                    </div>
                    <!-- <div style="padding-left: 20px">
                    <button
                      type="button"
                      class="el-button el-button--small el-button--primary"
                    >
                      下发指令
                    </button>
                  </div> -->
                  </div>
                  <!-- 顶部栏---右边 -->
                  <!-- <div>速度</div> -->
                </div>
                <div
                  v-if="ismapyou && addressList.length !== 0"
                  style="
                    width: 350px;
                    text-align: center;
                    font-weight: 700;
                    color: #000;
                  "
                >
                  轨迹信息
                </div>
              </div>
              <!-- 轨迹日期 -->
              <div v-if="ismapyou" style="padding-bottom: 5px">
                <el-date-picker
                  v-model="trajectoryData"
                  type="datetimerange"
                  range-separator="——"
                  start-placeholder="开始日期时间"
                  end-placeholder="结束日期时间"
                  size="mini"
                  :time-arrow-control="true"
                  :picker-options="trajectoryOptions"
                  :default-time="['10:00:00', '12:00:00']"
                  @change="trajectoryFn"
                >
                </el-date-picker>
              </div>
              <!-- 地图 -->
              <!-- 是未知、与轨迹有数据才显示 -->
              <div
                v-if="!ismapyou || (ismapyou && addressList.length !== 0)"
                style="display: flex; justify-content: space-around"
              >
                <baidu-map
                  style="width: 100%; height: 580px"
                  class="map-wrap"
                  :center="mapData.center"
                  :zoom="mapData.zoom"
                  @ready="mapHandler"
                  @click="getLocation"
                >
                </baidu-map>
                <!-- 位置轨迹地图右边addresstabListId -->
                <div class="mapyou" v-if="ismapyou">
                  <!-- 当是轨迹时才会出现 -->
                  <div>
                    <div class="danxin mapyouth">
                      <div class="mapyouth-1">位置</div>
                      <div class="mapyouth-2">更新时间</div>
                      <div class="mapyouth-3">状态</div>
                    </div>
                    <div v-if="addressList.length !== 0">
                      <div
                        class="danxin mapyoutd"
                        v-for="(item, index) in addressList"
                        :key="index"
                      >
                        <div class="mapyoutd-1">{{ index + 1 }}</div>
                        <div class="mapyoutd-2">
                          {{ item.update_time || "--" }}
                        </div>
                        <div class="mapyoutd-3">
                          <div>lat:{{ item.lat || "--" }}</div>
                          <div>lng:{{ item.lng || "--" }}</div>
                        </div>
                      </div>
                      <div
                        style="text-align: center; color: #888; padding: 20px 0"
                      >
                        暂无更多...
                      </div>
                    </div>
                    <div
                      v-else
                      style="text-align: center; color: #888; padding-top: 30px"
                    >
                      暂无数据
                    </div>
                  </div>
                </div>
              </div>
              <!-- 轨迹没有数据返回时才显示 -->
              <div
                v-else
                style="
                  height: 350px;
                  width: 100%;
                  line-height: 350px;
                  text-align: center;
                "
              >
                暂无位置数据
              </div>
            </div>
            <!-- 没有经纬度时显示 -->
            <div
              v-else
              style="
                height: 350px;
                width: 100%;
                line-height: 350px;
                text-align: center;
              "
            >
              暂无位置数据
            </div>
          </div>
          <!-- tab栏下的内容---历史分析 -->
          <div
            v-if="tabListId == 3"
            class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24"
            style="padding-left: 5px; padding-right: 5px"
          >
            <el-date-picker
              v-model="historydataInput"
              type="datetimerange"
              range-separator="——"
              start-placeholder="开始日期时间"
              end-placeholder="结束日期时间"
              size="mini"
              :time-arrow-control="true"
              :picker-options="trajectoryOptions"
              :default-time="['10:00:00', '12:00:00']"
              @change="historycheckeddateFn"
            >
            </el-date-picker>

            <!-- 图表 -->
            <div style="padding-top: 10px">
              <div class="danxin">
                <div class="Historychart" style="margin-right: 20px">
                  <div class="Historychart-1">
                    <div class="Historychart-1-1">SOC</div>
                    <div
                      style="
                        height: 350px;
                        width: 100%;
                        line-height: 350px;
                        text-align: center;
                      "
                      v-if="typechartS"
                    >
                      暂无图表数据
                    </div>
                    <socBattery-history
                      v-else
                      :chartData="list"
                      :dataInput="historydataInput"
                      :databutton="historydatabutton"
                    />
                  </div>
                </div>
                <div class="Historychart">
                  <div class="Historychart-1">
                    <div class="Historychart-1-1">容量</div>
                    <div
                      style="
                        height: 350px;
                        width: 100%;
                        line-height: 350px;
                        text-align: center;
                      "
                      v-if="typechartA"
                    >
                      暂无图表数据
                    </div>
                    <rongBattery-history
                      v-else
                      :chartData="list"
                      :dataInput="historydataInput"
                      :databutton="historydatabutton"
                    />
                  </div>
                </div>
              </div>
              <div class="danxin">
                <div class="Historychart" style="margin-right: 20px">
                  <div class="Historychart-1">
                    <div class="Historychart-1-1">pcd温度</div>
                    <div
                      style="
                        height: 350px;
                        width: 100%;
                        line-height: 350px;
                        text-align: center;
                      "
                      v-if="typechartT"
                    >
                      暂无图表数据
                    </div>
                    <pcdBattery-history
                      v-else
                      :chartData="list"
                      :dataInput="historydataInput"
                      :databutton="historydatabutton"
                    />
                  </div>
                </div>
                <div class="Historychart">
                  <div class="Historychart-1">
                    <div class="Historychart-1-1">外壳温度</div>
                    <div
                      style="
                        height: 350px;
                        width: 100%;
                        line-height: 350px;
                        text-align: center;
                      "
                      v-if="typechartT"
                    >
                      暂无图表数据
                    </div>
                    <waiBattery-history
                      v-else
                      :chartData="list"
                      :dataInput="historydataInput"
                      :databutton="historydatabutton"
                    />
                  </div>
                </div>
              </div>
              <div class="danxin">
                <div class="Historychart" style="margin-right: 20px">
                  <div class="Historychart-1">
                    <div class="Historychart-1-1">电芯温度</div>
                    <div
                      style="
                        height: 350px;
                        width: 100%;
                        line-height: 350px;
                        text-align: center;
                      "
                      v-if="typechartT"
                    >
                      暂无图表数据
                    </div>
                    <dianBattery-history
                      v-else
                      :chartData="list"
                      :dataInput="historydataInput"
                      :databutton="historydatabutton"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { urlObj } from "@/api/login";
import LineChart from "../dashboard/LineChart.vue";
import socBatteryHistory from "../dashboard/socBatteryHistory.vue";
import rongBatteryHistory from "../dashboard/rongBatteryHistory.vue";
import pcdBatteryHistory from "../dashboard/pcdBatteryHistory.vue";
import waiBatteryHistory from "../dashboard/waiBatteryHistory.vue";
import dianBatteryHistory from "../dashboard/dianBatteryHistory.vue";
import DistanceTool from "bmaplib.distancetool";
import { number } from "echarts/lib/export";
export default {
  components: {
    LineChart,
    socBatteryHistory,
    rongBatteryHistory,
    pcdBatteryHistory,
    waiBatteryHistory,
    dianBatteryHistory,
  },

  data() {
    return {
      tabList: [
        { name: "基础信息", id: 1 },
        { name: "位置轨迹", id: 2 },
        { name: "历史分析", id: 3 },
        // { name: "报警记录", id: 4 },
        // { name: "指令记录", id: 5 },
        // { name: "日志记录", id: 6 },
      ],

      tabListId: 1, // 基础信息 位置轨迹 历史分析... tab序号
      typechartS: false,
      typechartA: false,
      typechartT: false,
      jcxxTimeNew: "",
      jcxxTimeOld: "",
      addressTabList: [
        { name: "位置", id: 1 },
        { name: "轨迹", id: 2 },
      ],

      list: {},
      dianxinList: [],
      maxdianxin: 0,
      mindianxin: 0,
      dataInput: 2,
      databutton: false,
      // 位置轨迹  strat
      addresstabListId: 1,
      iswzgjmap: false,
      //地图数据
      mapData: {
        //中心坐标
        center: { lng: null, lat: null },
        //缩放级别
        zoom: 12,
      },
      //BMap类
      BMap: null,
      //地图对象
      map: null,
      distanceTool: null,
      businessDetail: "",
      checkedObj: {},
      newminute: "", //当前时间
      oldminute: "", //2小时前
      addressList: [],
      PointArr: [],
      carMk: "", //终点坐标展示的mark对象定义
      myIcon2: "", //初始化终点坐标图标
      interval: null, //清除画轨迹定时器
      ismapyou: false, //控制地图右边的显示
      zoom: [
        "50",
        "100",
        "200",
        "500",
        "1000",
        "2000",
        "5000",
        "10000",
        "20000",
        "25000",
        "50000",
        "100000",
        "200000",
        "500000",
        "1000000",
        "2000000",
      ],
      trajectoryData: [],
      trajectoryOptions: {
        disabledDate(time) {
          let curDate = new Date().getTime();
          let three = 60 * 24 * 3600 * 1000;
          let threeMonths = curDate - three;
          return time.getTime() > Date.now() || time.getTime() < threeMonths;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近二个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 位置轨迹  end
      // 历史分析  start
      historydataInput: [], //历史分析日期
      historydatabutton: false, // 启动历史分析的日期选择
    };
  },
  watch: {
    tabListId: {
      handler(newValue) {
        if (newValue == 1) {
          this.jcxxFn();
        }
        // if (newValue == 3) {
        //   this.lsfxFn();
        // }
      },
      deep: true, // 深度监听
    },
  },
  created() {
    // 获取电池数据
    this.list = JSON.parse(this.$route.query.row) || {};
    if (!this.list.lat || !this.list.lng) {
      console.log("没有经纬度");
      this.iswzgjmap = true;
    } else {
      this.mapData.center.lat = this.list.lat;
      this.mapData.center.lng = this.list.lng;
      this.iswzgjmap = false;
      console.log("有经纬度");
    }

    console.log(
      "获取电池数据",
      this.mapData.center.lat,
      this.mapData.center.lng,
      JSON.parse(this.$route.query.row)
    );
  },
  mounted() {
    if (this.tabListId == 1) {
      this.jcxxFn();
    }
    this.userName =
      JSON.parse(sessionStorage.getItem("userObj")).user_type || "";

    // 获取电芯的电压数据
    if (this.list.cells_v) {
      this.dianxinList = this.list.cells_v.split(",") || [];
      // 活动电芯的电压最大值与最小值
      if (this.dianxinList.length !== 0) {
        let min = this.dianxinList[0] * 1;
        let max = this.dianxinList[0] * 1;
        for (let i = 1; i < this.dianxinList.length; i++) {
          if (this.dianxinList[i] * 1 > max) {
            max = this.dianxinList[i] * 1;
          }
          if (this.dianxinList[i] * 1 < min) {
            min = this.dianxinList[i] * 1;
          }
        }
        return (
          (this.mindianxin = min.toFixed(3) || 0),
          (this.maxdianxin = max.toFixed(3) || 0)
        );
      }
    } else {
      this.dianxinList = [];
    }
  },
  methods: {
    // 判断基础信息有没有数据
    jcxxFn() {
      this.getTimess(0);
      this.getTimess(this.dataInput);
      this.listData("SOC", this.jcxxTimeOld, this.jcxxTimeNew);
      this.listData("AH", this.jcxxTimeOld, this.jcxxTimeNew);
      this.listData("TEM", this.jcxxTimeOld, this.jcxxTimeNew);
    },
    // 判断历史分析有没有数据
    lsfxFn() {
      this.listData("SOC", this.historydataInput[0], this.historydataInput[1]);
      this.listData("AH", this.historydataInput[0], this.historydataInput[1]);
      this.listData("TEM", this.historydataInput[0], this.historydataInput[1]);
    },
    //历史分析的--日期选择
    historycheckeddateFn(val) {
      if (this.historydatabutton) {
        this.$message({
          message: "请不要连续点击查询日期",
          type: "error",
        });
        return false;
      }
      this.historydatabutton = true;
      setTimeout(() => {
        this.historydatabutton = false;
      }, 2000);

      this.getCurrentTime(2, new Date(val[0])); //拿到历史分析的开始时间
      this.getCurrentTime(0, new Date(val[1])); //拿到历史分析的结束时间
      console.log(
        "历史分析开始时间：",
        this.oldminute,
        "结束时间：",
        this.newminute
      );
      this.historydataInput = [];
      this.historydataInput[0] = this.oldminute; //获取历史分析--开始日期
      this.historydataInput[1] = this.newminute; //获取历史分析--结束日期
      this.lsfxFn();
    },

    // 基础信息--开始结束时间
    getTimess(val) {
      let date = new Date(new Date().getTime() - val * 60 * 60 * 1000);
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      let da =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      if (val !== 0) {
        //开始时间
        this.jcxxTimeOld = da;
      } else {
        //结束时间
        this.jcxxTimeNew = da;
      }
    },

    // 基础信息--时间搜索
    databuttonFn() {
      if (this.databutton) {
        this.$message({
          message: "请不要连续点击搜索",
          type: "error",
        });
        return false;
      }
      if (!this.dataInput) {
        this.$message({
          message: "请输入",
          type: "error",
        });
        return false;
      }
      if (this.dataInput > 24) {
        this.$message({
          message: "只能查询24小时以内的设备数据",
          type: "error",
        });
        return false;
      }

      this.databutton = true;
      setTimeout(() => {
        this.databutton = false;
      }, 2000);
      this.jcxxFn();
    },
    // 返回正常页面
    returnFn() {
      this.$router.go(-1);
    },

    // 大的tab栏
    tabListFn(id) {
      if (id !== this.tabListId) {
        clearInterval(this.interval); //清除画轨迹定时器
      }
      if (id !== 2) {
        this.getCurrentTime(0); //获取当前时间
        this.getCurrentTime(2); //获取多少个小时的数据
        this.trajectoryData = []; //轨迹日期值清空
        this.trajectoryData[0] = this.oldminute; //赋予轨迹日期开始值
        this.trajectoryData[1] = this.newminute; //赋予轨迹日期结束值
      }
      this.tabListId = id;

      if (id == 2) {
        //如果是位置轨迹，是位置的时候，执行
        this.addresstabListId = 1;
        if (this.addresstabListId == 1) {
          this.mapHandler({ BMap: this.BMap, map: this.map });
          // this.getCurrentTime(0); //获取当前时间
          // this.getCurrentTime(2); //获取多少个小时的数据
          // this.listData("POS"); //获取位置信息
          // setTimeout(() => {
          //   this.mapData.center.lng = this.addressList[0].lng;
          //   this.mapData.center.lat = this.addressList[0].lat;
          // }, 500);
        }
      }
      if (id == 3) {
        //历史分析
        this.getCurrentTime(0); //获取当前时间
        this.getCurrentTime(2); //获取多少个小时的数据
        this.historydataInput = [];
        this.historydataInput[0] = this.oldminute; //获取历史分析--开始日期
        this.historydataInput[1] = this.newminute; //获取历史分析--结束日期
        this.historydatabutton = true;
        this.lsfxFn();
        setTimeout(() => {
          this.historydatabutton = false;
        }, 2000);
      }
    },

    // 获取位置、soc、容量、温度数据
    listData(type, strat, end) {
      let prarms = {
        func: "getChart",
        token: JSON.parse(sessionStorage.getItem("userObj")).token || "",
        business: {
          chart_type: type || "", //图表数据类型  POS：位置  SOC：电量 AH:容量  TEM：温度
          s_time: strat || this.oldminute, //开始时间
          e_time: end || this.newminute, //结止时间
          battery_id: this.list.id || "", //电池编号
          density: 0, //数据间隔 0：5分 1：10分 以此类推},    num <= 4 ? 0 : a
        },
      };
      urlObj(prarms).then((res) => {
        var obj = res.result || [];
        if (type == "POS") {
          this.addressList = obj;
          this.PointArr = [];
          if (this.addressList.length !== 0) {
            this.addressList.forEach((item, i) => {
              let ob = {
                lng: item.lng,
                lat: item.lat,
                route: 180,
              };
              this.PointArr.push(ob);
            });
          }
        }
        if (type == "SOC") {
          if (obj.length == 0) {
            this.typechartS = true;
          }
        }
        if (type == "AH") {
          if (obj.length == 0) {
            this.typechartA = true;
          }
        }
        if (type == "TEM") {
          if (obj.length == 0) {
            this.typechartT = true;
          }
        }
      });
    },

    // 获取年月日时分秒---开始时间 与  结束时间
    getCurrentTime(val, time) {
      //val为0时获取是结束时间，不为零为开始时间；有time时为位置轨迹时间选择，没有时为其他
      let date = new Date(
        time ? time : new Date().getTime() - val * 60 * 60 * 1000
      );
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      let da =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      if (val !== 0) {
        //获取开始时间
        this.oldminute = da;
      } else {
        //获取结束时间
        this.newminute = da;
      }
    },

    // 位置轨迹   strat
    // 轨迹日期
    trajectoryFn(val) {
      console.log(999, new Date(val[0]), this.trajectoryData);
      this.getCurrentTime(2, new Date(val[0])); //拿到轨迹的开始时间
      this.getCurrentTime(0, new Date(val[1])); //拿到轨迹的结束时间
      this.listData("POS");
      clearInterval(this.interval); //清除画轨迹定时器
      this.mapHandler({ BMap: this.BMap, map: this.map });
    },

    // 位置轨迹tab栏
    addresstabListFn(id) {
      if (this.addresstabListId !== id) {
        clearInterval(this.interval); //清除画轨迹定时器
      }
      this.addresstabListId = id;
      // 当id为2，是轨迹时，就显示地图右边位置的信息
      if (id == 2) {
        //当为位置轨迹的时候
        this.getCurrentTime(0); //获取当前时间
        this.getCurrentTime(2); //获取多少个小时的数据
        this.listData("POS"); //获取位置信息
        this.trajectoryData = []; //轨迹日期值清空
        this.ismapyou = true; //地图右边显示
        this.trajectoryData[0] = this.oldminute; //赋予轨迹日期开始值
        this.trajectoryData[1] = this.newminute; //赋予轨迹日期结束值
        this.mapHandler({ BMap: this.BMap, map: this.map });
      } else {
        this.ismapyou = false;
        this.mapHandler({ BMap: this.BMap, map: this.map });
      }
    },

    //地图预处理
    async mapHandler({ BMap, map }) {
      setTimeout(async () => {
        //保存百度地图类
        this.BMap = BMap;
        //保存地图对象
        this.map = map;
        console.log(34343, map);
        // 按住鼠标右键，修改倾斜角和角度
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        // map.setHeading(64.5);   //设置地图旋转角度
        // map.setTilt(73);       //设置地图的倾斜角度
        //清除地图上所有的覆盖物(保证每次点击只有一个标记)
        map.clearOverlays();
        //设置坐标
        // 是位置时执行
        if (this.addresstabListId == 1) {
          this.mapData.center.lat = this.list.lat;
          this.mapData.center.lng = this.list.lng;
          this.mapData.zoom = 19;
          console.log("tab栏1", this.mapData.center.lat);
          let ma = new BMap.Marker(
            new BMap.Point(this.mapData.center.lng, this.mapData.center.lat)
          ); // 创建标注
          map.addOverlay(ma); // 将标注添加到地图中
        }

        // 是轨迹时执行
        if (this.addresstabListId == 2) {
          // this.mapData.zoom = 12;
          //创建定位标记
          if (this.PointArr.length !== 0) {
            this.mapData.zoom = 18;
            console.log("tab栏2");
            // 将地图中心移到起点
            this.mapData.center.lng = this.PointArr[0].lng;
            this.mapData.center.lat = this.PointArr[0].lat;
            // 设置起点的坐标、图标与位置
            this.addMarker(
              new BMap.Point(this.PointArr[0].lng, this.PointArr[0].lat),
              "起点",
              map,
              this.PointArr
            );

            this.myIcon2 = new BMap.Icon(
              "http://developer.baidu.com/map/jsdemo/img/car.png",
              new BMap.Size(52, 26),
              { anchor: new BMap.Size(27, 13) }
            ); //初始化终点坐标图标
            var temporary = []; //定义中间新取出的值放到一个新的数组里面
            var i = 0;

            this.interval = setInterval(() => {
              if (i == 0) {
                temporary.push(this.PointArr[i]);
              }

              if (i >= this.PointArr.length - 1) {
                clearInterval(this.interval);
                this.mapData.zoom = 7;
                return;
              }
              i = i + 1;
              temporary.push(this.PointArr[i]);
              this.drowLine(map, temporary); //画线调用
            }, 1000);

            // 根据位置列表，在地图上添加标记
          } else {
            // console.log(878787);
          }
        }
      }, 500);
    },

    // 每一秒画一次线的方法调用
    drowLine(map, temporary) {
      if (temporary && temporary.length > 1) {
        //判断数值为两个点时开始进行绘制
        for (var i = 0; i < temporary.length - 1; i++) {
          // console.log(55, temporary, temporary[i].lng, temporary[i].lat);
          var polyline22 = new BMap.Polyline(
            [
              new BMap.Point(temporary[i].lng, temporary[i].lat),
              new BMap.Point(temporary[i + 1].lng, temporary[i + 1].lat),
            ],
            { strokeColor: "green", strokeWeight: 3, strokeOpacity: 1 }
          ); //创建折线
          map.addOverlay(polyline22);
          // 将地图中心移到终点
          this.mapData.center.lng = temporary[i].lng;
          this.mapData.center.lat = temporary[i].lat;
          this.getZoom(
            temporary[i + 1].lng,
            temporary[i].lng,
            temporary[i + 1].lat,
            temporary[i].lat,
            map
          ), //根据经纬极值计算缩放级别
            this.addMarkerEnd(
              new BMap.Point(temporary[i + 1].lng, temporary[i + 1].lat),
              "终点",
              map,
              temporary[i + 1]
            ); //添加图标
        }
      }
    },
    //根据经纬极值计算缩放级别
    getZoom(maxLng, minLng, maxLat, minLat, map) {
      // 级别18到3。
      var pointA = new BMap.Point(maxLng, maxLat); // 创建点坐标A
      var pointB = new BMap.Point(minLng, minLat); // 创建点坐标B
      var distance = Number(map.getDistance(pointA, pointB).toFixed(1)); //获取两点距离,保留小数点后两位
      for (var j = 0; j < this.zoom.length; j++) {
        if (Number(this.zoom[j]) - distance > 0) {
          return (
            (this.mapData.zoom = 18 - j + 3),
            console.log(777, this.mapData.zoom)
          ); //之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。18 - j + 3
        }
      }
    },

    //画轨迹终点
    addMarkerEnd(point, name, mapInit, trackUnit) {
      if (name == "终点") {
        if (this.carMk) {
          //先判断第一次进来的时候这个值有没有定义，有的话就清除掉上一次的。然后在进行画图标。第一次进来时候没有定义也就不走这块，直接进行画图标
          mapInit.removeOverlay(this.carMk);
        }
        this.carMk = new BMap.Marker(point, { icon: this.myIcon2 }); // 创建标注
        this.carMk.setRotation(trackUnit.route); //trackUnit.route
        mapInit.addOverlay(this.carMk); // 将标注添加到地图中
        this.carMk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
      }
    },
    //画轨迹起点
    addMarker(point, name, mapInit, trackUnit) {
      if (name == "起点") {
        let imgUrl = require("../../../assets/images/origin.png");
        var myIcon = new BMap.Icon(imgUrl, new BMap.Size(32, 32), {
          anchor: new BMap.Size(32, 32), //这句表示图片相对于所加的点的位置mapStart
          // offset: new BMap.Size(-10, 45), // 指定定位位置
          // imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
        });
        var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
        mapInit.addOverlay(marker); // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
      }
    },

    //点击地图
    getLocation(e) {
      console.log(44444, e.point, e);
      // // this.mapData.zoom = 20;
      // //设置经度
      // this.mapData.center.lng = e.point.lng;
      // //设置纬度
      // this.mapData.center.lat = e.point.lat;
      // //百度地图类
      // let BMapGL = this.BMap;
      // let geoc = new BMapGL.Geocoder();
      // //解析当前的坐标成地址
      // geoc.getLocation(e.point, (rs) => {
      //   console.log(1212, e.point, rs);
      //   //获取地址对象
      //   let addressComp = rs.addressComponents;
      //   //拼接出详细地址
      //   this.businessDetail =
      //     addressComp.province +
      //     addressComp.city +
      //     addressComp.district +
      //     addressComp.street +
      //     addressComp.streetNumber;
      //   console.log(66, this.businessDetail);
      // });
    },
    // 位置轨迹     end
  },
};
</script>

<style lang="scss" scoped>
.app-main-container {
  width: calc(100% - 16px);
  margin: 16px auto;
  background: #fff;
  border-radius: 4px;
}
.el-row {
  position: relative;
  box-sizing: border-box;
}
.el-col-lg-24 {
  width: 100%;
}

.el-col-md-24 {
  width: 100%;
}
.el-col-sm-24 {
  width: 100%;
}
.el-col-24 {
  width: 100%;
}
.el-col {
  float: left;
  box-sizing: border-box;
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
html body .el-card {
  margin-bottom: 15px;
}

.el-card {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
}
.el-card__body {
  padding: 16px;
}
.el-row--flex.is-justify-center {
  justify-content: center;
}
.el-row--flex {
  display: flex;
}

.el-row {
  position: relative;
  box-sizing: border-box;
}
.content_start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.el-col-12 {
  width: 50%;
}
.el-button--small {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 4px;
}
.el-button--primary {
  color: #fff !important;
  background-color: #41b584 !important;
  border-color: #41b584 !important;
}
.el-radio-group {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  font-size: 0;
}
.item_battery {
  height: 30px;
  width: 30px;
}
.el-radio-button,
.el-radio-button__inner {
  position: relative;
  display: inline-block;
  outline: none;
}
.el-tag {
  background-color: #ecf8f3;
  border-color: #d9f0e6;
  display: inline-block;
  height: 32px;
  padding: 0 10px;
  line-height: 30px;
  font-size: 12px;
  color: #41b584;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
}
.el-tag--dark.el-tag--danger {
  background-color: #f34d37;
  border-color: #f34d37;
  color: #fff;
}
.el-tag--mini {
  height: 20px;
  padding: 0 5px;
  line-height: 19px;
  margin-right: 10px;
}
.el-tag--dark.el-tag--success {
  background-color: #47ba80;
  border-color: #47ba80;
  color: #fff;
}
.det_title {
  font-size: 18px;
  font-weight: 700;
}
.title_tx2 {
  position: absolute;
  z-index: 1000;
  font-size: 28px;
  width: 290px;
  top: 80px;
  text-align: center;
}

.ellipsis-text {
  padding-top: 5px;
  display: inline-block;
  width: 80px; /* 设置元素宽度 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略符号表示文本被截断 */
  transition: all 0.3s ease; /* 平滑的过渡效果 */
}

.ellipsis-text:hover {
  width: auto; /* 鼠标悬停时，取消宽度限制 */
  white-space: normal; /* 允许文本换行显示 */
  overflow: visible; /* 不再隐藏文本 */
}
.danxin {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.mapyou {
  width: 310px;
  border: 1px solid #ccc;
  border-left: none;
  height: 580px;
  overflow-y: auto;
  overflow-x: auto;
}
.mapyouth {
  font-size: 16px;
  color: #333;
  height: 40px;
  border-bottom: 1px solid #ccc;
}
.mapyouth-1 {
  width: 60px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-right: 1px solid #ccc;
}
.mapyouth-2 {
  width: 90px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-right: 1px solid #ccc;
}
.mapyouth-3 {
  width: 140px;
  text-align: center;
}
.mapyoutd {
  font-size: 12px;
  color: #666;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
}
.mapyoutd-1 {
  width: 60px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-right: 1px solid #ccc;
}
.mapyoutd-2 {
  width: 89px;
  height: 50px;
  text-align: center;
  position: relative;
  top: 15px;
}
.mapyoutd-3 {
  width: 141px;
  text-align: center;
  // height: 50px;
  text-align: center;
  // line-height: 50px;
  border-left: 1px solid #ccc;
}
.Historychart {
  width: 50%;
  border: 1px solid #eee;
  padding: 20px 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
.Historychart-1 {
  width: 90%;
  padding-left: 10%;
}
.Historychart-1-1 {
  text-align: center;
  color: #000;
  font-weight: 700;
  font-size: 18px;
}
</style>
